<!-- 源码查看页面模板 - 专门用于展示页面源代码的功能页面 -->
<template>
	<!-- 源码查看主容器：整个页面的根容器 -->
	<view class="source-view-container">
		<!-- 页面头部：包含标题和工具栏 -->
		<view class="header">
			<!-- 页面标题（已注释）：可显示当前查看的页面名称 -->
			<!-- <text class="title">源码查看 - {{ pageTitle }}</text> -->
			
			<!-- 工具栏：提供源码查看的各种操作功能 -->
			<view class="toolbar">
				<!-- 字体放大按钮：增加代码显示字体大小 -->
				<button class="tool-btn" @click="zoomIn">放大</button>
				<!-- 字体缩小按钮：减小代码显示字体大小 -->
				<button class="tool-btn" @click="zoomOut">缩小</button>
				<!-- 字体重置按钮：恢复默认字体大小 -->
				<button class="tool-btn" @click="resetZoom">重置</button>
				<!-- 复制代码按钮：将源码复制到剪贴板 -->
				<button class="tool-btn" @click="copyCode">复制</button>
				<!-- 返回按钮：回到上一个页面 -->
				<button class="tool-btn btn-back" @click="goBack">返回</button>
			</view>
		</view>
		
		<!-- 代码显示区域：可滚动的源码内容容器 -->
		<scroll-view class="code-container" scroll-y="true" :style="{ fontSize: fontSize + 'rpx' }">
			<!-- 代码内容包装器：源码文本的直接容器 -->
			<view class="code-content">
				<!-- 预格式化文本：保持代码的原始格式和缩进 -->
				<pre class="code-text">{{ sourceCode }}</pre>
			</view>
		</scroll-view>
	</view>
</template>

<script>
/**
 * 源码查看页面组件
 * 功能：提供页面源代码的查看、缩放、复制等功能
 * 特点：支持多种源码展示，具备完整的用户交互功能
 */
export default {
	/**
	 * 组件数据
	 * @returns {Object} 返回组件的响应式数据
	 */
	data() {
		return {
			// 当前查看的页面标题
			pageTitle: '',
			// 要显示的源代码内容
			sourceCode: '',
			// 当前字体大小（rpx单位）
			fontSize: 24,
			// 最小字体大小限制
			minFontSize: 16,
			// 最大字体大小限制
			maxFontSize: 48
		}
	},
	
	/**
	 * 页面加载完成时触发
	 * @param {Object} options - 页面参数对象
	 */
	onLoad(options) {
		// 获取传递的页面信息参数
		if (options.page) {
			// 解码页面名称（处理URL编码）
			this.pageTitle = decodeURIComponent(options.page);
			// 根据页面名称加载对应的源码
			this.loadSourceCode(options.page);
		}
	},
	
	methods: {
		/**
		 * 加载指定页面的源码
		 * @param {string} pageName - 页面名称标识
		 */
		loadSourceCode(pageName) {
			// 源码映射表：根据页面名称获取对应的源码内容
			const sourceCodeMap = {
				'首页': this.getIndexSource(),
				'页面B': this.getPageBSource(),
				'页面C': this.getPageCSource()
			};
			
			// 设置源码内容，如果找不到则显示提示信息
			this.sourceCode = sourceCodeMap[pageName] || '源码未找到';
		},
		
		// 获取首页源码
		getIndexSource() {
			return `<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="button-area">
			<button class="btn" @click="goToPageB">进入页面B</button>
			<button class="btn view-source-btn" @click="viewSource">查看源码</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello'
		}
	},
	onLoad() {

	},
	methods: {
		// 跳转到页面B
		goToPageB() {
			uni.navigateTo({
				url: '/pages/pageB/pageB'
			})
		},
		// 查看源码
		viewSource() {
			uni.navigateTo({
				url: '/pages/sourceView/sourceView?page=首页'
			})
		}
	}
}
<\/script>`;
		},
		
		// 获取页面B源码
		getPageBSource() {
			return `<template>
	<view class="content">
		<view class="header">
			<text class="title">页面B</text>
		</view>
		<view class="button-area">
			<button class="btn" @click="goToPageC">跳转到页面C</button>
			<button class="btn btn-back" @click="goBack">返回上一页</button>
			<button class="btn view-source-btn" @click="viewSource">查看源码</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	onLoad() {
		
	},
	methods: {
		// 跳转到页面C
		goToPageC() {
			uni.navigateTo({
				url: '/pages/pageC/pageC'
			})
		},
		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		},
		// 查看源码
		viewSource() {
			uni.navigateTo({
				url: '/pages/sourceView/sourceView?page=页面B'
			})
		}
	}
}
<\/script>`;
		},
		
		// 获取页面C源码
		getPageCSource() {
			return `<template>
	<view class="content">
		<view class="header">
			<text class="title">页面C</text>
		</view>
		<view class="button-area">
			<button class="btn btn-back" @click="goBack">返回上一页</button>
			<button class="btn btn-home" @click="goToHome">返回首页</button>
			<button class="btn view-source-btn" @click="viewSource">查看源码</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	onLoad() {
		
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		},
		// 直接返回首页
		goToHome() {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},
		// 查看源码
		viewSource() {
			uni.navigateTo({
				url: '/pages/sourceView/sourceView?page=页面C'
			})
		}
	}
}
<\/script>`;
		},
		
		/**
		 * 放大字体
		 * 增加代码显示的字体大小，提升可读性
		 * 有最大字体限制，防止字体过大影响显示效果
		 */
		zoomIn() {
			if (this.fontSize < this.maxFontSize) {
				this.fontSize += 2;  // 每次增加2rpx
			}
		},
		
		/**
		 * 缩小字体
		 * 减小代码显示的字体大小，适应不同屏幕尺寸
		 * 有最小字体限制，确保代码仍然可读
		 */
		zoomOut() {
			if (this.fontSize > this.minFontSize) {
				this.fontSize -= 2;  // 每次减少2rpx
			}
		},
		
		/**
		 * 重置字体大小
		 * 将字体大小恢复到默认值（24rpx）
		 * 提供快速恢复标准显示效果的功能
		 */
		resetZoom() {
			this.fontSize = 24;  // 恢复默认字体大小
		},
		
		/**
		 * 复制代码到剪贴板
		 * 使用uni-app的剪贴板API将源码复制到系统剪贴板
		 * 提供成功和失败的用户反馈
		 */
		copyCode() {
			uni.setClipboardData({
				data: this.sourceCode,  // 要复制的源码内容
				success: () => {
					// 复制成功时显示提示
					uni.showToast({
						title: '代码已复制到剪贴板',
						icon: 'success'
					});
				},
				fail: () => {
					// 复制失败时显示错误提示
					uni.showToast({
						title: '复制失败',
						icon: 'error'
					});
				}
			});
		},
		
		/**
		 * 返回上一页
		 * 使用uni.navigateBack返回到页面栈中的上一个页面
		 * 提供用户退出源码查看的导航功能
		 */
		goBack() {
			uni.navigateBack({
				delta: 1  // 返回上一级页面
			});
		}
	}
}
</script>

<style>
/* 源码查看页面样式 */

/* 主容器样式 - 全屏垂直布局 */
.source-view-container {
	display: flex;  /* 弹性布局 */
	flex-direction: column;  /* 垂直排列 */
	height: 100vh;  /* 占满整个视口高度 */
	background-color: #f5f5f5;  /* 浅灰色背景 */
}

/* 页面头部样式 - 包含标题和工具栏 */
.header {
	display: flex;  /* 弹性布局 */
	justify-content: space-between;  /* 两端对齐 */
	align-items: center;  /* 垂直居中 */
	padding: 20rpx 30rpx;  /* 内边距 */
	background-color: #fff;  /* 白色背景 */
	border-bottom: 1rpx solid #e0e0e0;  /* 底部边框 */
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);  /* 阴影效果 */
}

/* 页面标题样式 */
.title {
	font-size: 32rpx;  /* 字体大小 */
	font-weight: bold;  /* 粗体 */
	color: #333;  /* 深灰色文字 */
}

/* 工具栏容器样式 */
.toolbar {
	display: flex;  /* 弹性布局 */
	gap: 10rpx;  /* 按钮间距 */
}

/* 工具按钮基础样式 */
.tool-btn {
	padding: 10rpx 20rpx;  /* 内边距 */
	font-size: 24rpx;  /* 字体大小 */
	border-radius: 8rpx;  /* 圆角 */
	border: 1rpx solid #ddd;
	background-color: #fff;  /* 白色背景 */
	color: #333;  /* 深灰色文字 */
}

/* 工具按钮激活状态样式 */
.tool-btn:active {
	background-color: #f0f0f0;  /* 按下时的背景色 */
}

/* 返回按钮特殊样式 */
.btn-back {
	background-color: #007aff;  /* 蓝色背景 */
	color: #fff;  /* 白色文字 */
	border-color: #007aff;  /* 蓝色边框 */
}

/* 代码显示容器样式 - 占据剩余空间 */
.code-container {
	flex: 1;  /* 占据剩余空间 */
	padding: 20rpx;  /* 内边距 */
	background-color: #fff;  /* 白色背景 */
	margin: 20rpx;  /* 外边距 */
	border-radius: 12rpx;  /* 圆角 */
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);  /* 阴影效果 */
}

/* 代码内容区域样式 */
.code-content {
	padding: 20rpx;  /* 内边距 */
}

/* 代码文本样式 - 等宽字体显示 */
.code-text {
	font-family: 'Courier New', monospace;  /* 等宽字体 */
	line-height: 1.6;  /* 行高 */
	color: #333;  /* 深灰色文字 */
	white-space: pre-wrap;  /* 保留空白符和换行 */
	word-wrap: break-word;  /* 长单词换行 */
	background-color: #f8f8f8;  /* 浅灰色背景 */
	padding: 20rpx;  /* 内边距 */
	border-radius: 8rpx;  /* 圆角 */
	border: 1rpx solid #e0e0e0;  /* 边框 */
}
</style>